<template>
  <!-- 新增角色对话框 -->
  <el-dialog title="新增用户" width="600px" :visible.sync="dialogVisible">
    <el-form
      ref="addForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="80px"
    >
      <!-- 一行 -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户账号" prop="userName">
            <el-input
              v-model="formData.userName"
              placeholder="请设定用户账号"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户密码" prop="userPassword">
            <el-input
              v-model="formData.userPassword"
              type="password"
              placeholder="请设定用户密码"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 一行 -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名">
            <el-input
              v-model="formData.realName"
              placeholder="请输入姓名"
              :autosize="{ minRows: 3, maxRows: 4 }"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" prop="userSex">
            <el-select
              v-model="formData.userSex"
              placeholder="请选择性别"
              clearable
            >
              <el-option
                v-for="(item, index) in sexOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 一行 -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="角色">
            <el-select
              v-model="formData.roleId"
              placeholder="请选择角色"
              clearable
            >
              <el-option
                v-for="(item, index) in roleOptions"
                :key="index"
                :label="item.roleName"
                :value="item.roleId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="userStatus">
            <el-radio-group v-model="formData.userStatus" size="medium">
              <el-radio
                v-for="(item, index) in statusOptions"
                :key="index"
                :label="item.value"
              >
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 一行 -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="归属地域">
            <el-input
              v-model="$store.getters.user.areaName"
              clearable
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="归属地域" prop="area">
            <treeselect
              v-model="formData.areaId"
              :options="areaOptions"
              :normalizer="normalizer"
              placeholder="请选择归属地域"
            />
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="职务">
            <el-input
              v-model="formData.userWork"
              placeholder="请输入职务"
              clearable
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 一行 -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="手机号码" prop="userPhone">
            <el-input
              v-model="formData.userPhone"
              placeholder="请输入手机号码"
              clearable
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="userEmail">
            <el-input
              v-model="formData.userEmail"
              placeholder="请输入邮箱"
              clearable
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 一行 -->
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input
              v-model="formData.userDesc"
              type="textarea"
              placeholder="请输入内容"
              :autosize="{ minRows: 3, maxRows: 4 }"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitAdd">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addUser } from '@/api/system/user';
// import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
export default {
  name: 'AddDialog',
  // components: { Treeselect },
  props: {
    menus: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      formData: {
        areaId: null,
        roleId: '',
        realName: '',
        userEmail: '',
        userName: '',
        userPassword: '',
        userPhone: '',
        userSex: '',
        userWork: '',
        userStatus: 0,
        roleDesc: ''
      },
      rules: {
        userName: [
          {
            required: true,
            message: '请设定用户账号',
            trigger: 'blur'
          }
        ],
        userPassword: [
          {
            required: true,
            message: '请设定用户密码',
            trigger: 'change'
          }
        ]
      },
      // 性别选项
      sexOptions: [{ value: '男' }, { value: '女' }],
      // 状态选项
      statusOptions: [
        { label: '正常', value: 0 },
        { label: '停用', value: 1 }
      ]
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.$parent.dialogAddVisible;
      },
      set(v) {
        this.$parent.dialogAddVisible = v;
      }
    },
    // 角色选项
    roleOptions() {
      return this.$parent.roles;
    },
    areaOptions() {
      return this.$parent.areaOptions;
    }
  },
  methods: {
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.areaId,
        label: node.areaName,
        children: node.children
      };
    },
    /**
     * 重置添加用户对话框
     */
    resetAddUserDialog() {
      this.formData = {
        areaId: null,
        roleId: '',
        realName: '',
        userEmail: '',
        userName: '',
        userPassword: '',
        userPhone: '',
        userSex: '',
        userWork: '',
        userStatus: 0,
        roleDesc: ''
      };
    },
    /**
     * 提交新增对话框
     */
    submitAdd() {
      this.$refs['addForm'].validate(async valid => {
        if (!valid) return;
        console.log('添加用户表单', this.formData);
        const { data: res } = await addUser(this.formData);
        console.log('api-添加用户', res);
        if (res.code === 200) {
          this.$message.success('添加用户成功');
          this.dialogVisible = false;
          this.resetAddUserDialog();
          this.$parent.getAllUser();
        } else {
          this.$message.error(res.message);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped></style>
